<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<div>
			<input type="text" name="user" placeholder="输入" id="user"/>
			<input type="button" id="btn" value="保存"/>
			<button id="clear">清除</button>
			<ul id="lists">
		
			</ul>
		</div>
		<script type="text/javascript">
			
			oBtn = document.getElementById("btn");
			oUser = document.getElementById("user");
			oList = document.getElementById("lists");
			var li = document.createElement("li")
			
			oBtn.onclick = function(){
				var val = oUser.value;
				localStorage.setItem("name",val)
				oUser.value = '';
				li.innerHTML = val;
				oList.appendChild(li)
			}
			
			window.onload=function(){
				if (localStorage.getItem("name")){
					val = localStorage.getItem("name");
					li.innerHTML = val;
					oList.appendChild(li)
					
				}
				
			}
			
			var clr = document.getElementById("clear");
			clr.onclick = function(){
				window.location.reload();
				localStorage.clear();
			}
			
			
			
//			//localstorage
//			var array = [{"title":"add","done":false}];
//			localStorage.setItem("todo",array)
		</script>
	</body>
</html>
